<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .folder-structure {
            /* border: 2px solid red; */
            margin: 50px;
            --padding-left: 30px;
            --padding-top: 15px;
            --line-height: 20px;
            --border-color:#000;
        }

        ul {
            /* border: 1px solid blue; */
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul {
            padding-left: var(--padding-left);
        }

        ul li {
            /* border: 1px solid green; */
            line-height: var(--line-height);
            padding-top: var(--padding-top);
            position: relative;
        }

        ul li::before {
            content: "";
            display: block;
            width: 1px;
            height: 100%;
            background-color: var(--border-color);
            position: absolute;
            top: 0;
            left: calc(var(--padding-left) * -1);
        }

        ul li::after{
         content: "";
         display: block;
         width: calc(var(--padding-left));
         height: 1px;
         background-color: var(--border-color);
         position: absolute;
         top: calc(var(--padding-top) + var(--line-height) / 2);
         left: calc(var(--padding-left) * -1);
        }

        /* 去掉每个ul最后一个li多出的线 */
        ul li:last-child::before {
            height: calc(var(--line-height) / 2 + var(--padding-top));
        }
        
    </style>
</head>

<body>
    <div class="folder-structure">
         竖状文件夹结构
        <!-- 一级目录结构 -->
        <ul>
            <li>前端
                <!-- 二级目录结构 -->
                <ul>
                    <li>HTML</li>
                    <li>CSS
                        <!-- 三级目录结构 -->
                        <ul>
                            <li>Bootstrap</li>
                            <li>Tailwind CSS</li>
                        </ul>
                    </li>

                    <li>JavaScript</li>
                </ul>
            </li>
            <li>Java</li>
            <li>Python</li>
        </ul>
    </div>
</body>

</html>